<!--
 * @Date: 2022-04-21 18:37:29
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-22 13:02:39
 * @FilePath: \weibovue\src\components\Notification\index.vue
 * @Description: something
-->
<template>
  <div>
    <el-popover
      placement="bottom"
      :width="300"
      trigger="click"
      v-model:visible="showPopover"
    >
      <template #default="scope">
        <slot></slot>
      </template>
      <template #reference>
        <el-badge
          :value="value"
          :is-dot="isDot"
          :max="max"
          style="cursor: pointer"
          class="noficationIcon"
        >
          <div
            class="noficationIcon"
            @click="showPopover = !showPopover"
            ref="triggerPop"
          >
            <i class="iconfont icon-wodexiaoxi"></i>
          </div>
        </el-badge>
      </template>
    </el-popover>
  </div>
</template>
<script lang="ts" setup>
import { inject, onMounted, ref, Ref, watch } from "vue";
import useClickOutSide from "../../hooks/useClickOutSide";
const props = defineProps({
  //通知数量
  value: {
    type: [String, Number],
    default: "",
  },
  //是否显示小圆点
  isDot: {
    type: Boolean,
    default: false,
  },
  //最大通知数
  max: {
    type: Number,
  },
});
const triggerPop = ref(null);

const { isClickOutSide } = useClickOutSide(triggerPop);
const emits = defineEmits(["closePopover"]);
let showPopover = ref(false);
const closePro: Ref<boolean> = inject("isFlag")!;
const closePopover = () => {
  showPopover.value = false;
};
watch(
  () => closePro.value,
  (val) => {
    if (showPopover.value && !val) {
      showPopover.value = false;
    }
  },
);
watch(isClickOutSide, (val) => {
  if (val) {
    showPopover.value = false;
  }
});
</script>
<style lang="less" scoped>
.el-popper {
  padding: 0;
}

.iconfont {
  font-size: 33px;
  &:hover {
    color: #ff8405;
  }
}
</style>
